<template>
  <el-container class="product-detail-container">
    <el-row :gutter="20" class="product-row">
      <!-- 商品图片部分 -->
      <el-col :span="12" class="image-container">
        <el-card shadow="hover" class="product-image-card">
          <el-carousel :interval="4000" type="card" class="product-carousel" height="400px" style="width: 600px;">
            <el-carousel-item v-for="(item, index) in productImages" :key="index">
              <el-image :src="item.emojiUrl" fit="cover" class="carousel-image" />
            </el-carousel-item>
          </el-carousel>
        </el-card>
      </el-col>

      <!-- 商品信息部分 -->
      <el-col :span="12" class="info-container" v-if="productData">

        <div class="product-info">
          <!-- 显示商品名称 -->
          <h1 class="product-title">{{ productData.name }}</h1>

          <!-- 显示商品简介 -->
          <p class="product-intro">{{ productData.info }}</p>

          <!-- 商品价格和折扣价格 -->
          <p class="product-price">
            原价: <span>¥{{ productData.price }}</span>
          </p>
          <p class="product-price" v-if="productData.discountPrice">
            折扣价: <span>¥{{ productData.discountPrice }}</span>
          </p>

          <!-- 库存数量 -->
          <p class="product-stock">
            库存: <span>{{ productData.num }} 件</span>
          </p>

          <!-- 购买数量选择 -->
          <div class="quantity-selector">
            <p>单次最多可购买 {{ productData.limitNum }} 件</p>
          </div>

          <!-- 操作按钮 -->
          <div class="product-action">
            <el-button type="primary" size="large" @click="buyNow">立即购买</el-button>
            <el-button type="warning" size="large" @click="addToCart">加入购物车</el-button>
          </div>
        </div>

      </el-col>
    </el-row>
  </el-container>
  <div class="description">
    <el-card shadow="hover">
      <div class="description-content">
        <p>商品详情</p>
        <p>{{ productData.info }}</p>
      </div>
    </el-card>
  </div>
  <productPayDialog  :isShow="isShowPayDialog" :item="productData" @close="resetDialog"  ></productPayDialog>
</template>
  
  <script setup lang="ts">
  import { ref,onMounted } from 'vue';
  import { useRoute } from 'vue-router';
  import { ElMessage } from 'element-plus';
  import productPayDialog from '../components/productPayDialog.vue';
  import axios from 'axios';
  interface Product {
    id: number;                 // 产品的ID
    createdAt: string;          // 创建时间，ISO 8601 格式的时间字符串
    updatedAt: string;          // 更新时间，ISO 8601 格式的时间字符串
    deletedAt: string | null;   // 删除时间，可能为null表示未删除
    name: string;               // 产品名称
    categoryId: number;         // 类别ID
    title: string;              // 产品的标题
    info: string;               // 产品的描述信息
    imgPath: string;            // 图片路径
    price: string;              // 产品原价，使用字符串表示金额
    discountPrice: string;      // 折扣价，使用字符串表示金额
    onSale: boolean;            // 是否在售
    num: number;                // 产品库存数量
    bossId: number;             // 卖家ID
    bossName: string;           // 卖家名称
    bossAvatar: string;         // 卖家头像，可能为空字符串
    limitNum: number;           // 限购数量
}
  const route = useRoute();
  const productData = ref< Product >(<Product>{});
  const productId = route.params.id;


  const productImages = ref([
    'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
    'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
    'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
  ]);
  
  onMounted(() => {

    axios.get(`/api/products/${productId}`)
      .then((res) => {
        console.log(res);
        
        if (res.data.code !== 200) {
          ElMessage.error('获取商品详情失败');
          return;
        }
       
        const data = res.data.data;
        
       
        
        
        productData.value = data
        if(productData.value.categoryId==2){
          axios.get('/api/emojis/getEmojisByProductId/'+productId)
            .then((res) => {
              const data = res.data.data;
              productImages.value = data
              
              
              
            });
        }
      });
  });
  // 商品信息
  const product = ref({
    goodsId: 1,
    goodsName: '洗发水控油蓬松去屑',
    goodsIntro: '净澈无油感，蓬松高颅顶，四大通感升级',
    sellingPrice: 46.6,
    stockNum: 100,
  });
  

  
  // 购买数量
  const quantity = ref(1);
  const isShowPayDialog = ref(false);
  // 点击立即购买按钮
  const buyNow = () => {
    isShowPayDialog.value = true;
    console.log('立即购买:', quantity.value, '件商品');
  };
  const resetDialog = () => {
    isShowPayDialog.value = false;
  };
  
  // 点击加入购物车按钮
  const addToCart = () => {
    console.log('加入购物车:', quantity.value, '件商品');
  };
  </script>
  
  <style scoped>
  .product-detail-container {
    max-width: 1600px;
    margin: auto;
    padding: 40px 20px;
    background-color: #fff;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    border-radius: 8px;
  }
  
  .product-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
  }
  
  .image-container {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .carousel-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  .product-info-card {

  }
  
  .product-info {
    padding: 20px;
  }
  
  .product-title {
    font-size: 32px;
    font-weight: bold;
    color: #333;
    margin-bottom: 15px;
  }
  
  .product-intro {
    font-size: 18px;
    color: #666;
    margin-bottom: 20px;
  }
  
  .product-price {
    font-size: 28px;
    color: #f56c6c;
    font-weight: bold;
    margin-bottom: 20px;
  }
  
  .product-stock {
    font-size: 16px;
    color: #333;
    margin-bottom: 20px;
  }
  
  .quantity-selector {
    margin-bottom: 30px;
  }
  
  .product-action {
    display: flex;
    gap: 20px;
  }
  
  .el-button {
    width: 180px;
  }
  </style>
  